<template>
	<div class="radio">
		<div class="radio-hd">
			<img src="../assets/img/radio.png" alt="" />
		</div>
		<div class="radio-bd" v-if="radioList !== 0">
			<div class="list-content">
				<el-row>
					<el-col
						:xs="6"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of radioList"
						:key="item.specialid"
					>
						<div class="item">
							<div class="img">
								<img :src="item.coverUrl" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<div class="intro">{{ item.name }}</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			radioList: [],
		};
	},
	methods: {
		getRadioList() {
			this.axios.get("/api-radio").then((res) => {
				console.log(res.data.programs);
				this.radioList = res.data.programs;
			});
		},
	},
	mounted() {
		this.getRadioList();
	},
};
</script>
<style lang="scss">
.radio {
	.radio-bd {
		margin-top: 20px;
		.list-content {
			.el-row {
				display: flex;
				flex-wrap: wrap;
				.el-col {
					margin-bottom: 20px;
					.item {
						width: 100%;
						height: 100%;
						cursor: pointer;
						.img {
							overflow: hidden;
							position: relative;
							width: 90%;
							border-radius: 10px;
							img {
								width: 100%;
								height: 100%;
							}
							.fill-screen {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.4);
								i {
									position: absolute;
									top: calc(50% - 25px);
									left: calc(50% - 25px);
									font-family: "iconfont";
									color: #fff;
									font-size: 50px;
									&:hover {
										color: #5192fe;
									}
								}
							}
							&:hover {
								.fill-screen {
									display: block;
								}
							}
						}
						.intro {
							width: 90%;
							line-height: 20px;
							margin-top: 10px;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							text-overflow: -o-ellipsis-lastline;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 14px;
							cursor: pointer;
							color: #333;
							&:hover {
								color: #5192fe;
							}
						}
					}
				}
			}
		}
	}
}
</style>
